<template>
  <div class="kind-main">
    <el-card shadow="never" class="main-card">
      <div slot="header" class="clearfix">
        <el-button type="primary" disabled>禁用</el-button>
      </div>

      <el-row :gutter="20">
        <el-col v-for="item in kindList" :key="item.id" :span="6">
          <el-card shadow="always">
            <div slot="header" class="clear">
              <span>{{ item.ctitle }}-{{ item.etitle }}</span>
            </div>

            <img :src="item.img" alt="">
          </el-card>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script>
import { kindList } from '@/api/kind'
export default {
  name: 'KindList',
  data() {
    return {
      kindList: []
    }
  },
  created() {
    this.getKindList()
  },
  methods: {
    getKindList() {
      kindList().then(res => {
        console.log(res)
        this.kindList = res.data
      })
    }
  }
}
</script>

<style lang="scss" scoped>
    .main-card{
        margin:30px;
        img{
            width:250px;
            height: 350px;
            border-radius:30px;

        }
    }
</style>
